---
title: Tailwind Typography를 사용하여 Markdown을 렌더링한 스타일
description: '@tailwind/typography를 사용하여 렌더링된 Markdown의 스타일을 지정하는 방법을 알아보세요.'
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

[Tailwind](https://tailwindcss.com)의 Typography 플러그인을 사용하여 Astro의 [**콘텐츠 컬렉션**](/ko/guides/content-collections/)과 같은 소스에서 렌더링된 Markdown의 스타일을 지정할 수 있습니다.

이 레시피에서는 Tailwind의 유틸리티 클래스를 사용하여 Markdown 콘텐츠의 스타일을 지정하기 위해 재사용 가능한 Astro 컴포넌트를 만드는 방법을 알려줍니다.

## 전제 조건

Astro 프로젝트는 다음과 같습니다.

	- [Astro의 Tailwind 통합](/ko/guides/integrations-guide/tailwind/)이 설치되어 있어야 합니다.
  - Astro의 [콘텐츠 컬렉션](/ko/guides/content-collections/)을 사용해야 합니다.

## `@tailwindcss/typography` 설정

먼저, 선호하는 패키지 관리자를 사용하여 `@tailwindcss/typography`를 설치하세요.

<PackageManagerTabs>
 	<Fragment slot="npm">
	```shell 
	npm install -D @tailwindcss/typography
	```
	</Fragment>
  	<Fragment slot="pnpm">
	```shell 
	pnpm add -D @tailwindcss/typography
	```
	</Fragment>
  	<Fragment slot="yarn">
	```shell
	yarn add --dev @tailwindcss/typography
	```
	</Fragment>
</PackageManagerTabs>

그런 다음 패키지를 Tailwind 구성 파일에 플러그인으로 추가하세요.

```diff lang="js"
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    // ...
  },
  plugins: [
+   require('@tailwindcss/typography'),
    // ...
  ],
}
```

## 레시피

1. 렌더링된 Markdown에 `<slot />`이 포함된 래핑 `<div>`을 제공하기 위해 `<Prose />` 컴포넌트를 만듭니다. 상위 요소에 원하는 [Tailwind 요소 수정자](https://tailwindcss.com/docs/typography-plugin#element-modifiers)와 함께 스타일 클래스 `prose`를 추가합니다.

    ```astro title="src/components/Prose.astro"
    ---
    ---
    <div 
      class="prose dark:prose-invert 
      prose-h1:font-bold prose-h1:text-xl 
      prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl 
      prose-headings:underline">
      <slot />
    </div>
    ```
    :::tip
    `@tailwindcss/typography` 플러그인은 [**요소 수정자**](https://tailwindcss.com/docs/typography-plugin#element-modifiers)를 사용하여 `prose` 클래스가 있는 컨테이너의 하위 컴포넌트 스타일을 지정합니다.

    이러한 수정자는 다음과 같은 일반 구문을 따릅니다.

      ```
      prose-[element]:class-to-apply
      ``` 

    예를 들어 `prose-h1:font-bold`는 모든 `<h1>` 태그에 `font-bold` Tailwind 클래스를 제공합니다.
    :::

2. Markdown을 렌더링하려는 페이지에서 컬렉션 항목을 쿼리합니다. Markdown 콘텐츠를 Tailwind 스타일로 래핑하려면 `await entry.render()`의 `<Content />` 컴포넌트를 `<Prose />`의 하위 항목으로 전달하세요.

    ```astro title="src/pages/index.astro"
    ---
    import Prose from '../components/Prose.astro';
    import Layout from '../layouts/Layout.astro';
    import { getEntry } from 'astro:content';

    const entry = await getEntry('collection', 'entry');
    const { Content } = await entry.render();
    ---
    <Layout>
      <Prose>
        <Content />
      </Prose>
    </Layout>
    ```

## 자료

- [Tailwind Typography 문서](https://tailwindcss.com/docs/typography-plugin)
